<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>futurecoder: learn python from scratch</title>
    <link href="https://fonts.googleapis.com/css?family=Heebo:400,400i,500,700|Titillium+Web:600" rel="stylesheet">
    <link rel="stylesheet" href="static/css/brochure/style.css"/>
    <link rel="stylesheet" href="static/css/home.css"/>
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link rel="shortcut icon" type="image/png" href="static/logo/favicon_32px.png"/>
    <meta property="og:title" content="futurecoder: Learn to code from scratch"/>
    <meta property="og:type" content="website"/>
    <meta property="og:description" content="100% free and interactive Python course for beginners"/>
    <meta property="og:image" content="https://futurecoder.io/static/logo/bordered.png"/>
</head>
<body onload="AOS.init({once:true})">
<div class="body-wrap boxed-container home-page">
    <div style="position:fixed; z-index:0; top:0; left:0; width:100%; height:100%;">
        <canvas id="canvas" style="width:100%; height:100%;"></canvas>
    </div>

    <header class="site-header">
        <div class="container">
            <div class="site-header-inner">
                <div class="brand header-brand float-left">
                    <img id="logo" src="static/logo/bordered.png" data-aos="fade-right" data-aos-delay="0">
                </div>
                <div class="navbar float-right" data-aos="fade" data-aos-duration="1000" data-aos-delay="1000">
                    <a href="http://futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> English
                    </a>
                    <a href="http://es.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> Español
                    </a>
                    <a href="http://fr.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> Français
                    </a>
<!--                    <a href="http://pl.futurecoder.io">-->
<!--                        <img class="translation-icon" src="static/img/icons/language.png"/> Polski-->
<!--                    </a>-->
                    <a href="http://ta.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> தமிழ்
                    </a>
                    <a href="http://zh.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> 中文
                    </a>
                    <a href="https://github.com/alexmojaki/futurecoder">
                        <i class="fab fa-github"></i> Github
                    </a>
                </div>
            </div>
        </div>
    </header>
    <main>
        <section class="hero">
            <div class="container center-content">
                <div class="hero-inner">
                    <div>
                        <h1 class="hero-title mt-0 is-revealing" data-aos="fade-right" data-aos-delay="100">
                            futurecoder
                        </h1>
                        <h3 class="hero-paragraph is-revealing" data-aos="fade-right" data-aos-delay="200">
                            Learn Python from scratch.
                        </h3>


                        <div class="bullets-inner section-inner">
                            <div class="bullets-wrap">
                                <div class="bullet" data-aos="fade-up" data-aos-delay="500" data-aos-offset="-200px">
                                    <div class="bullet-inner">
                                        <div class="bullet-header mb-16">
                                            <div class="bullet-icon mr-16">
                                                <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                                                    <g fill="none" fill-rule="nonzero">
                                                        <path d="M16 9c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4z" fill="#4353FF"/>
                                                        <path d="M27 9c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4z" fill="#43F1FF"/>
                                                        <path d="M27 12c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z" fill="#4353FF"/>
                                                        <path d="M5 23c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z" fill="#43F1FF"/>
                                                        <path d="M27 23c-1.859 0-3.41 1.28-3.858 3h-3.284A3.994 3.994 0 0 0 17 23.142v-3.284c1.72-.447 3-2 3-3.858 0-2.206-1.794-4-4-4-1.859 0-3.41 1.28-3.858 3H8.858A3.994 3.994 0 0 0 6 12.142V8.858c1.72-.447 3-2 3-3.858 0-2.206-1.794-4-4-4S1 2.794 1 5c0 1.858 1.28 3.41 3 3.858v3.284c-1.72.447-3 2-3 3.858 0 2.206 1.794 4 4 4 1.859 0 3.41-1.28 3.858-3h3.284A3.994 3.994 0 0 0 15 19.858v3.284c-1.72.447-3 2-3 3.858 0 2.206 1.794 4 4 4 1.859 0 3.41-1.28 3.858-3h3.284c.447 1.72 2 3 3.858 3 2.206 0 4-1.794 4-4s-1.794-4-4-4z" fill="#4353FF"/>
                                                    </g>
                                                </svg>
                                            </div>
                                            <h4 class="bullet-title m-0">Redefines interactive learning</h4>
                                        </div>
                                        <!--p class="text-sm mb-0">...</p-->
                                    </div>
                                </div>
                                <div class="bullet" data-aos="fade-up" data-aos-delay="600" data-aos-offset="-200px">
                                    <div class="bullet-inner">
                                        <div class="bullet-header mb-16">
                                            <div class="bullet-icon mr-16">
                                                <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                                                    <g fill-rule="nonzero" fill="none">
                                                        <path d="M7 8H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zM19 8h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#4353FF"/>
                                                        <path d="M19 20h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#43F1FF"/>
                                                        <path d="M31 8h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#4353FF"/>
                                                        <path d="M7 20H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#43F1FF"/>
                                                        <path d="M7 32H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#4353FF"/>
                                                        <path d="M29.5 18h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5z" fill="#43F1FF"/>
                                                        <path d="M17.5 30h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5zM29.5 30h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5z" fill="#4353FF"/>
                                                    </g>
                                                </svg>
                                            </div>
                                            <h4 class="bullet-title m-0">100% Free & Open Source</h4>
                                        </div>
                                        <!--p class="text-sm mb-0">...</p-->
                                    </div>
                                </div>
                                <div class="bullet" data-aos="fade-up" data-aos-delay="700" data-aos-offset="-200px">
                                    <div class="bullet-inner">
                                        <div class="bullet-header mb-16">
                                            <div class="bullet-icon mr-16">
                                                <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                                                    <g fill-rule="nonzero" fill="none">
                                                        <path d="M4 12H0V5a5.006 5.006 0 0 1 5-5h7v4H5a1 1 0 0 0-1 1v7z" fill="#43F1FF"/>
                                                        <path d="M32 12h-4V5a1 1 0 0 0-1-1h-7V0h7a5.006 5.006 0 0 1 5 5v7zM12 32H5a5.006 5.006 0 0 1-5-5v-7h4v7a1 1 0 0 0 1 1h7v4z" fill="#4353FF"/>
                                                        <path d="M27 32h-7v-4h7a1 1 0 0 0 1-1v-7h4v7a5.006 5.006 0 0 1-5 5z" fill="#43F1FF"/>
                                                    </g>
                                                </svg>
                                            </div>
                                            <h4 class="bullet-title m-0">Designed with care for beginners</h4>
                                        </div>
                                        <!--p class="text-sm mb-0">...</p-->
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div data-aos="fade-in" data-aos-delay="1000" data-aos-offset="-600px">
                            <div>
                                <a class="button button-primary button-complimentary-color button-block big" href="/course/">
                                    <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i> Start learning
                                </a>

                                <span style="margin: 0 1em">or</span>

                                <a class="button button-primary button-block big" href="/course/#ide">
                                    <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i> Just code
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="hero-illustration">
                        <div id="hero-image" class="is-moving-object is-rotating">
                            <img width="640" height="540" src="static/img/terminal.png">
                        </div>
                    </div>
                </div>
            </div>

            <div class="spacer"></div>
            <div class="spacer"></div>
            <div class="spacer"></div>

            <div class="container flex" style="justify-content: center" data-aos="fade-down" data-aos-duration="1800" data-aos-delay="1200" data-aos-offset="-800px">
                <div id="scroll-animation">
                    <a href="#header-end-anchor"><span></span></a>
                </div>
            </div>
            <div id="header-end-anchor"></div>

        </section>


        <section id="testimonials">
            <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-offset="200">
                <h1 class="center-text">See what others think</h1>
                <div class="badges">
                    <div class="badge">
                        <a href="https://www.reddit.com/r/learnprogramming/comments/qjs3wh/i_built_futurecoder_a_100_free_and_interactive/">
                            <div class="center-text">
                                <i class="fab fa-reddit-alien"></i>
                                r/LearnProgramming
                            </div>
                            <div class="flex">
                                <span><i class="fa fa-arrow-up"></i> 1786</span>
                                <span><i class="fa fa-medal"></i> 36</span>
                                <span><i class="fa fa-comments"></i> 118</span>
                            </div>
                        </a>
                    </div>
                    <div class="badge">
                        <a href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/i_built_futurecoder_a_100_free_and_interactive/">
                            <div class="center-text">
                                <i class="fab fa-reddit-alien"></i>
                                r/InternetIsBeautiful
                            </div>
                            <div class="flex">
                                <span><i class="fa fa-arrow-up"></i> 560</span>
                                <span><i class="fa fa-medal"></i> 6</span>
                                <span><i class="fa fa-comments"></i> 37</span>
                            </div>
                        </a>
                    </div>
                    <div class="badge">
                        <a href="https://github.com/alexmojaki/futurecoder">
                            <div class="center-text">
                                <i class="fab fa-github"></i>
                                GitHub
                            </div>
                            <div class="flex">
                                <span><i class="fa fa-star"></i> 1300+</span>
                            </div>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://github.com/alexmojaki/futurecoder/issues/164">
                            I use w3schools and other apps but
                            <strong>
                                this is by far the best interactive app I can find
                            </strong>
                            right now. Thanks so very much for making this.
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/Python/comments/pieyuu/i_built_futurecoder_a_free_interactive_python/hefgowx">
                            <strong>This is brilliant! I love it!</strong>
                            I feel like it would have been
                            <strong>such an easy way to learn</strong>
                            I'm almost upset I didn't have it when I did.
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.youtube.com/watch?v=un1BrrV57PA&lc=UgxTuVzf0xK0RuqLgeZ4AaABAg">
                            Futurecoder was the
                            <strong>best interactive (or non-interactive) programming tutorial I've ever
                                encountered</strong>.
                            Great pace, perfect UI/UX.
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnprogramming/comments/rmv603/im_a_senior_c_software_developer_and_i_want_to/hprxyn6/">
                            <strong>I like this way better than Codecademy</strong>.
                            You are 99% active learning while doing the exercises.
                            <strong>More classes need to be taught this way! I love it!</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/comment/hjlwk1c/">
                            Amazing resource.
                            This was extremely well put together.
                            <strong>A lot of courses could use this treatment.</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnpython/comments/1ekfb0c/futurecoderio_continued_learning/">
                            <strong>Hands down, the best learning experience I've had.</strong>
                            The encouraging, down-to-earth language and no lectures at all suited me well.
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnpython/comments/1ekfb0c/futurecoderio_continued_learning/ll3wan5/">
                            <strong>The single best tool that has helped me think better.</strong>
                            I have been devouring it.
                            <strong>I find it so interesting when others can't hold my attention.</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnpython/comments/xqxovo/what_is_the_best_free_python_course/iqcfws8/">
                            It's meant to be <strong>as easy and fast as possible.</strong>
                            I learned Python's basics within a week.
                            <strong>I attribute where I'm at now to this site.</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/comment/hk0mfcq/">
                            Honestly I never had any interest in coding, but your course is
                            <strong>really easy to use</strong>
                            so I'm learning programming everyday.
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section id="features">
            <div class="container">
                <div data-aos="fade-up" data-aos-duration="800" data-aos-offset="200">
                    <h1 class="center-text">Take a peek inside!</h1>
                </div>
                <div class="spacer"></div>

                <div>
                    <div class="feature flex">
                        <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                            <img src="static/img/features/layout.png">
                        </div>
                        <div class="feature-text" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <div class="feature-line"></div>
                                <h3>Fully Interactive</h3>
                            </div>
                            <p>
                                Users must run code in the provided editor or shell and answer questions to advance.
                            </p>
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-text" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <h3>Easy Debugging</h3>
                                <div class="feature-line">
                                </div>
                            </div>
                            <p>
                                With a single click, users can run powerful debuggers to visualise execution and find problems.
                                There are three debuggers, each with their own strengths:
                                <a href="http://pythontutor.com/">Python Tutor</a>, <a href="https://github.com/alexmojaki/snoop">Snoop</a>, and
                                <a href="https://github.com/alexmojaki/birdseye">Bird's Eye</a> (pictured).
                            </p>
                        </div>
                        <div class="feature-image" data-aos="fade-right" data-aos-duration="800">
                            <img src="static/img/features/birdseye.png">
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                            <img src="static/img/features/traceback.png">
                        </div>
                        <div class="feature-text" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <div class="feature-line"></div>
                                <h3>Enhanced Error Messages</h3>
                            </div>
                            <p>
                                Normal Python tracebacks are intimidating to beginners.
                                futurecoder removes the fear and makes them helpful instead.
                            </p>
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-text" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <h3>Parsons Problems</h3>
                                <div class="feature-line"></div>
                            </div>
                            <p>
                                If a student is stuck trying to solve an exercise, and they've exhausted all the hints,
                                they can try putting the shuffled solution in the correct order instead.
                                This ensures they still apply their mind while reducing frustration.
                            </p>
                        </div>
                        <div class="feature-image" data-aos="fade-right" data-aos-duration="800">
                            <img src="static/img/features/parsons.png">
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                            <img src="static/img/features/solution.png">
                        </div>
                        <div class="feature-text" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <div class="feature-line"></div>
                                <h3>Solution Breadcrumbs</h3>
                            </div>
                            <p>
                                As a last resort, students can gradually reveal the solution until they have enough
                                information to fill in the remaining gaps themselves.
                            </p>
                        </div>
                    </div>

                    <h4 class="center-text" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                        This is just a sample of the features.
                        <br>For more, <a href="#demo-vid">watch the video below</a> for more information or
                        <a href="/course/">get started immediately!</a>
                    </h4>
                </div>

            </div>
        </section>

        <section id="demo-vid" data-aos="fade-up" data-aos-duration="800" data-aos-offset="300">
            <div class="container flex center-content">
                <div>
                    <h2>Watch a demo of the features and benefits:</h2>
                    <!-- https://stackoverflow.com/a/20130011/2482744 -->
                    <div style="position: relative; padding-top: 56.25%">
                        <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                                src="https://www.youtube.com/embed/un1BrrV57PA"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen
                        ></iframe>
                    </div>
                </div>
            </div>
        </section>

        <section id="email-newsletter" data-aos="fade-up" data-aos-duration="800" data-aos-offset="300">
            <div class="container flex">
                <div class="col">
                    <h2 class="marginless text-right">Want to receive updates about futurecoder?</h2>
                </div>
                <div class="col">
                    <input id="email-input" type="email" placeholder="Email">
                    <button class="button button-primary button-block" onclick="submitEmail()">
                        Submit
                    </button>
                    <div id="email-success"
                         style="display: none; margin-top: 0.5em; font-weight: bold; color: #76ff76"
                    >
                        <i class="far fa-check-circle"></i>
                        Saved!
                    </div>
                </div>
            </div>
        </section>

        <section id="about">
            <div class="container flex" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800" data-aos-offset="50">
                <div class="col">
                    <img class="floating-anim-6" id="about-logo" src="static/logo/bordered.png">
                </div>
                <div class="col">
                    <h2 class="marginless">About</h2>
                    <p>
                        <b>futurecoder is a free and open-source platform and course for
                        complete beginners to teach themselves programming in Python.</b>
                    </p>
                    <h5>The long-term goals of futurecoder are ambitious:</h5>
                    <ul>
                        <li>Revolutionise computing education. We believe current learn-to-code platforms could be so much better.</li>
                        <li>Make the best learning resource possible which everyone can contribute to and improve</li>
                        <li>Allow anyone to learn programming on their own, regardless of background or talent</li>
                    </ul>
                    <h5>We mean to achieve this by:</h5>
                    <ul>
                        <li>Keeping students engaged and interested as they learn to write real code</li>
                        <li>Providing powerful tools that are easy to use to prevent frustration</li>
                        <li>Teaching Python, widely considered to be the best language to learn first
                            as well as the most popular language in real applications.</li>
                        <li>Consistently iterating with an open-source codebase</li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="contribute" data-aos="fade-up" data-aos-duration="800">
            <div class="container flex">
                <div class="col">
                    <p class="text-right">
                        This is a never-ending project.
                        There is lots of work to do to make this site bigger and better.
                        All kinds of help are needed and greatly appreciated!
                    </p>
                </div>
                <div class="col">
                    <img class="tech-stack-icon floating-anim-5" src="static/img/icons/python.png">
                    <img class="tech-stack-icon floating-anim-7" src="static/img/icons/react.png">
                    <h3 class="marginless">Interested in contributing code or course content?</h3>
                    <br>
                    <a href="https://github.com/alexmojaki/futurecoder/blob/master/how_to_contribute.md" class="button button-primary button-block">
                        <i class="fab fa-github"></i>&nbsp&nbsp Check out the contribution guide on GitHub
                    </a>
                </div>
            </div>

            <div class="spacer"></div>
            <div class="spacer"></div>

            <div class="container flex">
                <div class="col">
                </div>
                <div class="col">
                    <h3>Contact Us</h3>
                    <p>
                        <i class="fab fa-discord"></i>&nbsp&nbsp
                        <a href="https://discord.gg/KwWvQCPBjW">
                            Chat on Discord
                        </a>
                    </p>
                    <p>
                        <i class="fab fa-github"></i>&nbsp&nbsp
                        <a href="https://github.com/alexmojaki/futurecoder/issues/new">
                            Open an Issue on GitHub
                        </a>
                    </p>
                    <p>
                    <p>
                    <i class="fas fa-envelope"></i>&nbsp&nbsp
                        <a href="mailto:hello@futurecoder.io">
                            hello@futurecoder.io
                        </a>
                    </p>
                </div>
            </div>
        </section>


    </main>

    <footer class="site-footer">
        <div class="footer-dots is-moving-object is-translating" data-translating-factor="160">
            <!-- todo -->
            <!--svg width="69" height="91" xmlns="http://www.w3.org/2000/svg">
                <g fill="#43F1FF" fill-rule="evenodd">
                    <path d="M37.105 41.007l-2.9 1.334-.786 2.823.926 2.689 2.76 1.154 2.6-1.31 1.714-2.533-1.296-2.94z"/>
                    <path fill-opacity=".64" d="M63.109 27.24l-1.45.666-.394 1.412.464 1.344 1.38.577 1.3-.655.856-1.266-.647-1.47z"/>
                    <path fill-opacity=".24" d="M66.226 86.638l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".64" d="M13.497 43.713l-2.175 1-.59 2.118.695 2.016 2.07.866 1.95-.983 1.285-1.9-.972-2.204z"/>
                    <path fill-opacity=".8" d="M59.076 56.658l-2.175 1-.59 2.117.695 2.017 2.07.866 1.949-.983 1.286-1.9-.972-2.204z"/>
                    <path fill-opacity=".48" d="M22.262 18.49l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".64" d="M23.422.5l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".48" d="M2.637 12.5l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47zM36.563 10.856l-.725.334-.197.706.232.672.69.288.65-.327.428-.633-.324-.735z"/>
                </g>
            </svg -->
        </div>
        <div class="container flex">
            <div class="site-footer-inner has-top-divider">
                <div class="footer-copyright">
                    &copy; 2025 Alex Hall
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.flaticon.com/free-icons/language" title="language icons">Language icon created by Freepik - Flaticon</a>
                </div>
                <!--ul class="footer-social-links list-reset">
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Facebook</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Twitter</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Google</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                </ul-->
            </div>
        </div>
    </footer>
</div>

<script src="static/js/main.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script type="text/javascript" src="static/js/warpspeed.min.js"></script>
<script>
    new WarpSpeed(
        "canvas", {
            "speed": 2,
            "speedAdjFactor": 0,
            "density": 1.5,
            "shape": "square",
            "warpEffect": true,
            "warpEffectLength": 10,
            "depthFade": true,
            "starSize": 3,
            "backgroundColor": "hsl(263,45%,7%)",
            "starColor": "#eee"
        }
    );
</script>
</body>
</html>
